<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title uid="{{ user.id }}" gid="{{ gid }}" uname="{{ user.name }}">CoCoDep - {{ taskName }}</title>
        <link rel="stylesheet" href="/static/css/workspace.css">
        <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.1.3/socket.io.js"></script>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="/static/js/jquery-1.7.2.js"></script>
        <script src="/static/js/recorder.js"></script>
        <script src="/static/js/workspace.js"></script>
        <link href="https://at.alicdn.com/t/font_1551254_rxrrzgz2kjc.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

    <div class="container" style="width: 100%;">
        <div class="row" style="padding:5px;">

            <!--file system structure-->
            <div class="col-md-2">
                <div class="root_box">
                    <div style="display: inline"  oncontextmenu="return false">
                        <div class="last" id="last" lastid="0"><p class="root">Last</p></div>
                        <div class="current" pid="{{ root.id }}"  oncontextmenu="showOperationMenu(this)"><p class="root" id="current">{{ root.name }}</p></div>
                    </div>
                </div>

                <div class="child_box" oncontextmenu="return false">
                    {% for i in content %}
                        <div class="direct_box" eleType="{{ i.type }}" eleId="{{ i.id }}" oncontextmenu="showChildrenMenu(this)" onclick="next({{ i.id }},'{{ i.type }}')" ><p class="child">{{ i.name }}</p></div>
                    {% endfor %}
                </div>
            </div>

            <!--text pad-->
            <div class="col-md-8" style="padding-right:10px;height: 710px;padding-left: 0;margin-left: -5px">
                <div class="edit_board row">
                    <div style="width: 5%;" class="edit_div" id="num" total="1"><p line="1" class="lineNum">1</p></div>
                    <div style="width: 95%;" class="edit_div line">
                        <textarea wrap="off" id="edit" onkeydown="tab()" disabled></textarea>
                    </div>
                </div>
            </div>

            <!--chat room-->
            <div class="col-md-2" style="padding: 5px;background: #915fec;height: 700px;border-radius: 5px;color: white">
                <div style="height: 70%;width: 100%;border-radius: 5px;padding: 3px 3px 10px;">
                    <div class="chat_board">
                        <div class="name_list">
                            <div class="name">{{ user.name }}</div>
                            {% for i in members %}
                            <div class="name">{{ i }}</div>
                            {% endfor %}
                        </div>

                        <div style="height: 10px;background: #a355ec;"></div>

                        <div class="chat_pad" id="chat_pad">

                        </div>

                    </div>
                </div>


                <div style="height: 20%;width: 100%;border-radius: 5px;padding: 3px 3px 10px;">
                    <textarea class="input_area"></textarea>
                </div>
                <div style="height: 10%;padding: 15px 15px 15px;">
                    <button style="float: left;background: #ec4242;outline: 2px #960404;font-size: 20px;" class="btn" id="voice" flag="0">Record</button>
                    <button style="float: right;background: #60daba;outline: 2px #0d6539;font-size: 20px;" class="btn" id="send_btn">Send</button>
                </div>
            </div>
        </div>


    </div>
    <ul class="contextmenu" id="menu">
        <li><a id="childType" href="javascript:void(0);"></a></li>
        <li><a id="del" href="javascript:void(0);">Delete</a></li>
    </ul>
    <ul class="contextmenu" id="operation">
        <li><a id="newPath" href="javascript:void(0);">New Path</a></li>
        <li><a id="newFile" href="javascript:void(0);">New File</a></li>
        <li><a id="addFile" href="javascript:void(0);">Add File</a></li>
        <li><a id="dw" href="/downloadWork/{{ gid }}/">Download project</a></li>
    </ul>
    <form style="display:none;" method="post" action="/addFile/" id="fileAdd" enctype='multipart/form-data' >
        <input type="file" id="save" name="file">
        <input type="text" id="rid" name="rid">
        <script src="/static/js/jquery.form.js"></script>
        <script type="text/javascript">

        </script>
    </form>
    <audio id="audioSave" controls autoplay style="display: none"></audio>
    </body>
    </html>